<template>
    <ul class="wioc-list-services">
        <li :key="'dd'+index" v-for="(item,index) in datalist" @click="click(item)">
			<i></i>
            <img :src="item.imagePath"/>
                <h3>{{item.name}}</h3>  
        </li>
    </ul>
</template>


<script>
    export default {
        name:"wioc-list-services",
        components:{

        },
        data(){
            return{

            }
        },
        props:{
            datalist:Array,
        },
		methods:{
			click(item){
				this.$emit('click',item)
			}
		}
    }

</script>

<style lang="less" scoped>
.wioc-list-services{
    display:flex;
    justify-content:flex-start;
    flex-wrap: wrap;
    align-items:center;
    li{
        width: 31%;
        box-sizing: border-box;
        text-align:left;
        padding:0.1rem;
        border-radius: 0.145rem;
        max-height:1.09rem;
        margin-bottom: 0.09rem;
		margin-right: 0.09rem;
        background-color: #fff;
        box-shadow: 0 0.04rem 0.1rem 0 rgba(0,0,0,0.06);		
        img{
            display: block;
            width: 0.49rem;
            height: 0.49rem;
            border-radius: 0.15rem;
            vertical-align: middle;
            margin: 0 auto;
        }
        h3{
            width: 100%;
            font-size: 0.12rem;
            line-height: 0.22rem;
            margin-top: 0.1rem;
            font-weight: normal;
            color: #595959;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
			text-align: center;			
        }
		&:nth-child(3n){
			margin-right: 0;
		}
    }
	
	&.add,&.subtract{
		li{
			position:relative;
			i{
				display: block;
				position: absolute;
				top:-2%;
				right:-2%;
				width: 0.2rem;
				height: 0.2rem;
				text-align: center;
				border-radius: 50%;
				&:after{
					position: absolute;
					width: 0.2rem;
					font-size: 0.15rem;
					line-height: 0.18rem;
					left: 50%;
					margin-left: -0.1rem;
					color: #ffffff;
					content: "+";
				}
				
			}
		}
	}
	&.subtract{
		li{
			i{
			 transform: rotate(45deg);
			 background-color: #f66464;
			}
		}
	}
	&.add{
		li{
			i{
				background-color: #4ba0f3;
			}
		}
	}
}


</style>
